<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>在线咨询</title>
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript"  src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="message.css">
  <link rel="stylesheet" href="consultOnline.css">
  <link rel="stylesheet" href="./swiper/dist/css/swiper.css">
  <script type="text/javascript" src="./static/store.legacy.min.js"></script>
  <script src="./static/util.js"></script>
</head>
<body>
  <header>
    <div class="headerSwipper">
      <div class="headerSwipper_div">
        <div class="headerSwipper_div_iconview">
          <img src="./static/images/logo.png" alt="">
        </div>
        <div class="headerSwipper_div_myicon">
          <!-- <img src="" alt=""> -->
          <span class="loginText">登录</span>
          <div class="headerSwipper_div_myicon_icon" style="display: none">
            <img src="./static/images/iconsmall.png" alt="">
          </div>
          <div class="headerSwipper_div_myicon_info">
            <ul>
              <li class="headerSwipper_div_myicon_info_li">消息</li>
              <li class="headerSwipper_div_myicon_info_li">退出</li>
            </ul>
          </div>
        </div>
        <ul class="headerSwipper_div_ul">
          <li class="headerSwipper_div_li mobileapp">手机APP</li>
          <li class="headerSwipper_div_li vipprop">开通VIP</li>
        </ul>
      </div>
    </div>
  </header>
  <section>
    <div class="consult">
      <img class="consult_back" src="./static/images/consultback.png" alt="">
      <div class="consult_div">
        <div class="consult_div_top">
          <img class="consult_div_top_img" src="./static/images/serviceIcon.png" alt="">
          <span class="consult_div_top_span">柒佰伴高考志愿通  正在为您服务</span>
        </div>
        <div class="middle_div">
          <div class="middle_left">
            <div class="middle_left_top">
              <div class="dialogue_div">
                <div class="dialogue_div_imgview">
                  <img class="dialogue_div_img" src="./static/images/serverSmallIcon.png" alt="">
                </div>
                <p class="dialogue_div_p">
                  <span >问题解答内容如下</span>
                  <!-- <span class="question_has question_first">1、名字写错了如何修改？</span>
                  <span class="question_has question_second">2、自我评估里面的测试可以多次测试吗？</span>
                  <span class="question_has question_three">3、为什么学习视频在最新版本不可以暂停？</span>
                  <span class="question_has question_four">4、高考时间填错了如何修改？</span> -->
                </p>
              </div>
              <!-- <div class="dialogue_div_use">
                <div class="dialogue_div_imgview_use">
                  <img class="dialogue_div_img_use" src="./static/images/iconsmall.png" alt="">
                </div>
                <p class="dialogue_div_p_use">你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？你好，请问需要咨询什么？</p>
              </div> -->
            </div>
            <div class="middle_left_bottom">
              <textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="请您输入要咨询的问题"></textarea>
              <span class="raiseHand">发送</span>
            </div>
          </div>
          <div class="middle_right">
            <p class="middle_right_p">扫描下方二维码进行下载</p>
            <div class="anqr_div">
              <img src="./static/images/anQr.png" alt="">
              <p>Android</p>
            </div>
            <div class="anqr_div iosqr_div">
              <img src="./static/images/iosQr.png" alt="">
              <p>IOS</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="footerSwipper">
      <div class="footerSwipper_div">
        <ul class="footerSwipper_div_ul">
          <span class="footerSwipper_div_ul_span"><a href="./index.html">首页</a></span>
          <li class="footerSwipper_div_ul_li"><a href="./schools.html?keyword=">院校大全</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./major.html">专业大全</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./mentality.html">心理辅导</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./careerPlanning.html">职业规划</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./infoTest.html">高考资讯</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./recruitment.html?type=1">自主招生</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./recruitment.html?type=2">单独招生</a></li>
        </ul>
        <ul class="footerSwipper_div_ul">
          <span class="footerSwipper_div_ul_span">学习提升</span>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=3">微课</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=4">模拟试题</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=5">往届试题</a></li>
        </ul>
        <ul class="footerSwipper_div_ul">
          <span class="footerSwipper_div_ul_span">志愿填报</span>
          <li class="footerSwipper_div_ul_li"><a href="./index.html?index=6">咨询</a></li>
          <li class="footerSwipper_div_ul_li"><a href="./mobileapp.html">下载APP</a></li>
        </ul>
        <!-- 扫一扫关注我们区域 -->
        <div class="QRcodeSwipper">
          <span class="QRcodeSwipper_span">扫一扫关注我们</span>
          <div class="QRcodeSwipper_imgview">
            <img src="./static/images/qr.png" alt="">
          </div>
        </div>
        <!-- 中间信息区域 -->
        <div class="middleInfo">
          <span class="middleInfo_span_city">中国·河南·郑州</span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon middleInfo_span_GE_icon_special phone_icon"><img src="./static/images/phone.png" alt=""></span><span class="middleInfo_span_GE_text middleInfo_span_GE_text_color">0371-68064945</span></span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon message_icon"><img src="./static/images/message.png" alt=""></span><span class="middleInfo_span_GE_text">595879735@qq.com</span></span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon message_icon"><img src="./static/images/store.png" alt=""></span><span class="middleInfo_span_GE_text">河南柒佰伴教育信息咨询有限公司
          </span></span>
          <span class="middleInfo_span_GE"><span class="middleInfo_span_GE_icon middleInfo_span_GE_icon_special address_icon"><img src="./static/images/address.png" alt=""></span><span class="middleInfo_span_GE_text middleInfo_span_GE_text_special">郑州市郑东新区立体世界
            </span></span>
        </div>
        <p class="footerSwipper_div_p">河南世霖网络软件科技 2014-2018 豫ICP备14010456号-1</p>
      </div>
    </div>
  </footer>
  <script src="./static/util.js"></script>
  <script src="./swiper/dist/js/swiper.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
      },
      observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true//修改swiper的父元素时，自动初始化swiper
    });
  </script>
  <script>
    $(document).ready(function () {
      $('.headerSwipper_div_myicon_info').hide()
      // 焦点自动在多行输入
      $('#textarea').focus()
      // 点击发送事件
      $('.middle_div').on('click', '.raiseHand', function() {
        var textareaText = $(this).parents('.middle_left').find('textarea').val()
        if(textareaText == '') {
          return
        }else {
          var useHtml = "<div class=\"dialogue_div_use\">\n                <div class=\"dialogue_div_imgview_use\">\n                  <img class=\"dialogue_div_img_use\" src=\"./static/images/iconsmall.png\" alt=\"\">\n                </div>\n                <p class=\"dialogue_div_p_use\">" + textareaText + "</p>\n              </div>";
          $('.middle_left_top').append(useHtml)
          // var serverHtml = "<div class=\"dialogue_div\">\n                <div class=\"dialogue_div_imgview\">\n                  <img class=\"dialogue_div_img\" src=\"./static/images/serverSmallIcon.png\" alt=\"\">\n                </div>\n                <p class=\"dialogue_div_p\">\n                  <span >\u95EE\u9898\u89E3\u7B54\u5185\u5BB9\u5982\u4E0B</span>\n                  <span class=\"question_has question_first\">1\u3001\u540D\u5B57\u5199\u9519\u4E86\u5982\u4F55\u4FEE\u6539\uFF1F</span>\n                  <span class=\"question_has question_second\">2\u3001\u81EA\u6211\u8BC4\u4F30\u91CC\u9762\u7684\u6D4B\u8BD5\u53EF\u4EE5\u591A\u6B21\u6D4B\u8BD5\u5417\uFF1F</span>\n                  <span class=\"question_has question_three\">3\u3001\u4E3A\u4EC0\u4E48\u5B66\u4E60\u89C6\u9891\u5728\u6700\u65B0\u7248\u672C\u4E0D\u53EF\u4EE5\u6682\u505C\uFF1F</span>\n                  <span class=\"question_has question_four\">4\u3001\u9AD8\u8003\u65F6\u95F4\u586B\u9519\u4E86\u5982\u4F55\u4FEE\u6539\uFF1F</span>\n                </p>\n              </div>";
          var serverHtml = '<div class="dialogue_div">'
               + '<div class="dialogue_div_imgview">'
                 + '<img class="dialogue_div_img" src="./static/images/serverSmallIcon.png" alt="">'
             + ' </div>'
               + '<p class="dialogue_div_p">'
                 + '<span >问题解答内容如下</span>'
                + html
              + ' </p>'
             + '</div>'
          $('.middle_left_top').append(serverHtml)
          $('.middle_left_top').scrollTop($('.middle_left_top')[0].scrollTopMax || $('.middle_left_top')[0].scrollHeight)
          $(this).parents('.middle_left').find('textarea').val('')
        }
      })
      var qu_aw = [
      ]
      // 点击客服预备问题
      $('.middle_div').on('click', '.question_has', function() {
        var index_qu = $(this).index() - 1
        var serverHtml = "<div class=\"dialogue_div\">\n                <div class=\"dialogue_div_imgview\">\n                  <img class=\"dialogue_div_img\" src=\"./static/images/serverSmallIcon.png\" alt=\"\">\n                </div>\n                <p class=\"dialogue_div_p\">\n                  " + qu_aw[index_qu] + "\n                </p>\n              </div>";
          // console.log($('.middle_left_top'))
          $('.middle_left_top').append(serverHtml)
          $('.middle_left_top').scrollTop($('.middle_left_top')[0].scrollTopMax || $('.middle_left_top')[0].scrollHeight)
          // $('.middle_left_top').scrollTop(1100)
      })
      var html = ''
      $.ajax({
        url: urlhost + '/admin.php/api/homepage/get_info',
        method: 'POST',
        data: {
        },
        success: function(res) {
          // $('.swiper-wrapper').empty()
          // var html = ''
          // for(var i=0;i<res.data.length;i++) {
          //   html += '<div class="swiper-slide">'
          //     + '<img class="ImgSwipperview_img" src="' + res.data[i].pic + '" alt="">'
          //   + '</div>'
          // }
          // $('.swiper-wrapper').html(html)
          var data = res.data
          $('.dialogue_div_p').find('.question_has').remove()
          for(var i = 0;i<data.length;i++) {
            html += '<span class="question_has question_first" qu-id="' + data[i].ids + '">'+ data[i].ids +'、'+ data[i].title +'</span>'
            qu_aw.push(data[i].desc)
          }
          $('.dialogue_div_p').append(html)
        }
      })


      // 轮播图获取
      $.ajax({
        url: urlhost + '/admin.php/api/homepage/pc_banner',
        method: 'POST',
        data: {
          type: 1
        },
        success: function(res) {
          // <div class="swiper-slide">
          //   <img class="ImgSwipperview_img" src="./static/images/mainSwipper.png" alt="">
          // </div>
          $('.swiper-wrapper').empty()
          var html = ''
          for(var i=0;i<res.data.length;i++) {
            html += '<div class="swiper-slide">'
              + '<img class="ImgSwipperview_img" src="' + res.data[i].pic + '" alt="">'
            + '</div>'
          }
          $('.swiper-wrapper').html(html)
        }
      })
    })
  </script>
  </body>
</html>